{extend name="base" /}
{block name="title"}程序员圈子,技术交流,问题解答,吹水聊天|程序员的收藏夹-专注于程序员学习、分享{/block}

{block name="style"}
	<style type="text/css">
		.iceUpload-img{
			border: none !important;
		}
		.iceUpload-img .iceUpload-info {
			width: 80px;
		    height: 80px;
		}
		.iceUpload-img .iceUpload-info img{
			object-fit: cover;
		    width: 80px;
		    height: 80px;
		}
	</style>
{/block}

{block name="header"}
	{include file="public/user_header" /}
{/block}

{block name="content"}
<template class="iceView">
<div class="zbd-content">
	<div class="page mt15">
		<div class="w300">

			<div class="box1 yy" data-scroll-class="fiexdLeftTop" data-scroll-top="550" data-scroll-delay="1" data-scroll-type="auto">
				<div class="title-l fon14">热门圈子</div>
				<div class="bbs-item" i-for="{{bbsTypeList}}" i-index="typeIndex" i-item="typeItem" i-if="{{typeIndex < 5}}">
					<div class="qz-pic left">
						<img i-src="{{typeItem.type_pic}}" alt="" class="covers">
					</div>
					<div class="qz-desc left">
						<div class="el qz-h a-line"><a href="/bbs/circle?id={{typeItem.id}}" class="black">{{typeItem.type_name}}</a></div>
						<div class="el qz-bz">{{typeItem.type_desc}}</div>
						<div class="black"><span class="gray">话题 {{typeItem.bbs_count}} </span>&nbsp; · &nbsp;<span class="gray">成员 {{typeItem.type_fans_count}}</span></div>
					</div>
				</div>

				<div class="bbs_list_item p10 cursor-pointer text-center"><a href="/bbs/circle" class="gray">查看全部圈子 <i class="icon ice-arrow-round-r gray"></i></a></div>
			</div>

			<div class="tip bg-red">
				<p class="bold red">温馨提示：</p>
				<p class="red">不要随便添加圈子里的任何形式的联系方式，保护个人信息安全，避免上当受骗</p>
			</div>
		</div>

		<div class="w700 left">
			<div class="breadcrumb mb5">
			    <a href="/" class="aunline">首页</a>
			    <a href="/bbs" class="aunline">社区广场</a>
			    动态话题详情

			    <a href="javascript:history.go(-1);" class="aunline reafter right"><i class="icon ice-revoke-left"></i> 返回</a>
			</div>

			<div id="bbs_list" style="min-height: 600px;">
				<div  class="box1 bbs_list_item p20">
					<div class="bbs_list_item_hed">
						<a href="javascript:;"><img class="bbs-avatar left" i-src="{{bbsInfo.bbsUser.avatar}}"></a>
						<div class="bbs_user left">
							<div class="bbs_user_name"><a href="javascript:;" class="a-line">{{bbsInfo.bbsUser.nickname}}</a> <span i-if="{{this_login_user_id != bbsInfo.bbsUser.id}}" class="border-red gz" i-onclick="follow" data-fans_id="{{bbsInfo.bbsUser.id}}">{{bbsInfo.this_is_follow == 1 ? '我的关注' : '求关注'}}</span></div>
							<div class="bbs_user_desc">{{bbsInfo.bbsUser.descs ? bbsInfo.bbsUser.descs : '这老表什么都没留下~'}}</div>
							<span class="bbs_date">{{bbsInfo.create_time}}</span>
						</div>
					</div>
					<div class="bbs-map mt10" i-if="{{bbsInfo.is_hot == 1}}"><span class="icon ice-bar-chart bbs-map-name orange">&nbsp;热门推荐</span></div>

					<div class="bbs_comtent">
						<a href="/bbs/circle?id={{bbsInfo.bbsType.id}}" i-if="{{bbsInfo.bbsType.type_name}}" class="mr5 orange" data-notes="{position:'right',content:'来自“互联网圈子”的动态,前往查看更多'}">#{{bbsInfo.bbsType.type_name}}#</a>
						<div><pre style="white-space: pre-wrap;word-wrap: break-word;">{{bbsInfo.content}}</pre></div>
					</div>

					<div class="bbs_pic_list">
						<img class="img-view bbs_pic" i-for="{{bbsInfo.bbs_imgs}}" i-index="imgsIndex" i-item="imgsItem" i-src="{{imgsItem}}">
					</div>

					<!-- <div class="bbs-map mt10"><span class="icon ice-map bbs-map-name"> 广东 广州</span></div> -->

					<div class="bbs_action">
						<div class="bbs_zan_pic_list left">
							<span i-if="{{bbsInfo.bbsLike.length > 0}}">
								<a href="javascript:;" i-for="{{bbsInfo.bbsLike}}" i-index="likeIndex" i-item="likeItem">
									<img class="align-middle bbs_zan_pic" i-src="{{likeItem.avatar}}">
								</a>
							</span>
							<i class="zan-total" i-if="{{bbsInfo.bbs_like_count > 0}}">共{{bbsInfo.bbs_like_count}}人点赞</i>
							<i class="zan-total" i-if="{{bbsInfo.bbs_like_count == 0}}">快来首赞呗!</i>
						</div>
						<div class="right">
							<a href="javascript:;" class="icozdy icon ice-view"> 足迹 {{bbsInfo.browse}}</a>
							<a href="javascript:;" class="icozdy icon ice-heart-on {{bbsInfo.bbsCk.length > 0 ? 'red' : ''}}" i-onclick="onLike" data-indexs="{{index}}" data-bbs_id="{{bbsInfo.id}}"> 点赞 {{bbsInfo.bbs_like_count}}</a>
						</div>
					</div>
				</div>
				

				<div class="box1">
					<div class="title-l fon14">评论 <span class='red icon ice-certified small-1'> 请文明发表评论，营造良好环境</span></div>
					<div class="row">
						{if condition="$userInfo"}
					    <div class="group-input w12">
					        <div class="group-label-1 mb15">
					        	<img class="avatar30" src="{$userInfo['avatar']|default='http://pic.zhengbingdong.cn/upload/20220327/4e7b348516ddb23dc43cd4e7bb2c916d.png'}"/>
					        </div>
					        <input type="text" class="msg-inp" name="msg" i-model="{{msg}}" placeholder="请输入评论内容">
					        <div class="group-label btn bg-blue JS-msg" i-onclick="bbsMsg" data-type='pre'>提交</div>
					    </div>
					    {else /}
					    <div class="no_login">
					    	<p class="no_login_p"><a href="javascript:;" onclick="ShowLogin(this)">登录</a> 后可参与评论</p>
					    </div>
					    {/if}
					</div>
				</div>

				<div class="box1">
					<div class="title-l fon14">评论列表（{{bbsInfo.bbs_comment_count}}）</div>

					<div class="row11" i-for="bbsList" i-index="index" i-item="item" >
						<div class="w12">
							<div class="pingl-img1">
								<img class="avatar30-1" i-src="{{item.addUser.avatar}}">
							</div>
							<div class="pingl-com1 mb15">
								<div class="pingl-com-user">
									<a href="javascript:;" class="pingl-com-user-info black">{{item.addUser.nickname}}&nbsp;<span i-if="{{item.addUser.id == bbsInfo.user_id}}" class="zbd-tags bg-red">作者</span></a> 
									<span class="addtime">{{item.create_time}} <span class="blue huifu"></span></span>
								</div>
								<div class="comment-content-detail1">{{item.msg}}</div>
								<div>
									<i class="icon ice-editor diyhf" i-onclick="showMsg" data-sub_i="{{index}}" data-bbs_id="{{item.id}}" data-bbs_id="{{item.id}}" data-parent_id="{{item.id}}" > 回复</i>
									<div class="hfDomHtml" i-if="{{show_msg_id == item.id}}">
										<div class="group-input">
											<input type="text" i-model="{{subMsg}}" placeholder="@{{item.addUser.nickname}}">
											<div class="group-label cursor-pointer" i-onclick="bbsMsg" data-type='som'>回复评论</div>
										</div>
										<a href="javascript:" i-onclick="closeHf" class="green"><i class="icon ice-close-round"></i> 取消回复</a>
									</div>
								</div>
								<div class="msg-dub" i-if="{{item.ment.length > 0}}" i-for="{{item.ment}}" i-index="commentIndex" i-item="commentItem">
									<div>
										<a href="javascript:;" class="black">{{commentItem.plUser.nickname}}</a>&nbsp;<span i-if="{{commentItem.plUser.id == bbsInfo.user_id}}" class="zbd-tags bg-red">作者</span>&nbsp; 回复 <a href="javascript:;" class="black">{{item.addUser.nickname}}<span i-if="{{bbsInfo.user_id == item.user_id}}" class="zbd-tags bg-red ml5">作者</span></a>
										<spa class="addtime">{{commentItem.create_time}}</spa>
									</div>
									<div class="comment-content-detail1">{{commentItem.msg}}</div>
								</div>
							</div> 
						</div>
					</div>

					<div class="jiaz cursor-pointer JS-next mb20" i-if="{{hideLoad}}"><span i-onclick="NextBbs" id="loadtext">{{loadtext}}</span></div>

					<div class="pt40 pb40 gray text-center" i-if="{{bbsList.length == 0}}">
						暂无评论
					</div>
					
				</div>
			</div>
		</div>

		<div class="w200 left">
			<div class="box1 yy" data-scroll-class="fiexdLeftTop" data-scroll-top="100" data-scroll-delay="1" data-scroll-type="auto">
				<div class="bbs-user-info">
					<div class="text-center" i-if="{{bbsInfo.bbsUser.avatar}}">
						<img class="avapic img-view mt20" i-src="{{bbsInfo.bbsUser.avatar ? bbsInfo.bbsUser.avatar : 'http://pic.zhengbingdong.cn/upload/20220330/09d81ed4b6c44f9441748b382870f91c.png'}}">
					</div>
					<div class="avapic-wai-r mb30">
						<div class="avapic-wai-name el mb15">{{bbsInfo.bbsUser.nickname}}</div>
						<div class="cursor-pointer">
							<span i-if="{{this_login_user_id != bbsInfo.bbsUser.id}}" class="tag tag-radius bg-{{bbsInfo.this_is_follow == 1 ? 'red' : 'green'}}" i-onclick="follow" data-fans_id="{{bbsInfo.bbsUser.id}}"><i class="icon ice-lifecycle"></i> {{bbsInfo.this_is_follow == 1 ? '已经关注' : '求关注'}}</span>
							<span class="tag tag-radius bg-blue"><i class="icon ice-home"></i>{{this_login_user_id != bbsInfo.bbsUser.id ? 'TA' : '我'}}的主页</span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<input type="hidden" id="bbs_id" value="{$param['bbs_id']|default=''}">
<input type="hidden" id="this_login_user_id" value="{$param['user_id']|default=''}">
</template>
<script src="/static/web/zbdui/src/view/iceView.js"></script>
<script type="text/javascript">

    ice.view({
    	bbsTypeList:[],
    	sub_i : '', // 子级回复评价的令牌索引，只有回复的时候才会有值
    	loadtext: '加载更多评论',
    	show_msg_id:'', // comment_id
    	bbsList:'',
    	bbs_id:'', // 所属动态的ID
    	bbsInfo:'',
    	this_login_user_id:'',
    	page:1,
    	limit:10,
    	msg:'',
    	subMsg:'',
    	parent_id:0,
    	hideLoad: true,
    	NextBbs: function(e){
    		var that = this;
    		that.page = parseInt(that.page) + 1;
    		that.bBsList('concat');
    	},
    	closeHf: function(e){
    		// 取消回复
    		this.show_msg_id = '';
    		this.sub_i = '';
    		this.subMsg = '';
    	},
    	showMsg: function(e) {
    		var that = this;
    		var show_msg_id = ice(e).attr('data-bbs_id');
    		var parent_id = ice(e).attr('data-parent_id');
    		that.show_msg_id = show_msg_id;
    		that.parent_id = parent_id;
    		that.sub_i = ice(e).attr('data-sub_i')
    	},
    	
    	follow: function(e){
    		// 关注与取消关注
    		var fans_id = ice(e).attr('data-fans_id');
    		if(!fans_id){
    			return false;
    		}
    		var that = this;
    		ice.ajax({
			    url:'/AjaxSyn/follow',
			    type:'get',
			    data:{
			    	fans_id : ice(e).attr('data-fans_id')
			    },
			    success:function(res){
			        if(res.code == 1){
			            ice.pop({content:res.message,icon:'warning'})
			            return false;
			        }else{
			        	that.funBbsInfo()
			        }
			    }
			});
    	},
    	bbsMsg: function(e){

    		// 直接提交一级评论
    		var that = this;
    		var type = ice(e).attr('data-type');
    		var datas = {
				'bbs_id' : that.bbsInfo.id,
				'msg' : type == 'pre' ? that.msg : that.subMsg,
				'parent_id' : type == 'pre' ? 0 : that.parent_id, //当前评价的上一级,默认为0
			}

			if(datas.msg == ''){
    			ice.pop({content:'请输入评论内容',icon:'none'})
    			return false;
    		}

			ice.ajax({
			    url:'/AjaxSyn/bbsMsg',
			    type:'post',
			    data:datas,
			    success:function(res){
			        if(res.code == 1){
			        	if(res.message=='请先登录'){
			        		ShowLogin();
			        		return false;
			        	}
			            ice.pop({content:res.message})
			            return false;
			        }else{
			        	ice.pop({content:res.message,icon:'success'})
						that.msg = '';
						that.subMsg = '';
						that.parent_id = 0
						that.bbsInfo.bbs_comment_count = parseInt(that.bbsInfo.bbs_comment_count) + 1

						if(type == 'pre'){
							// 一级评价直接加载
							that.page = 1;
							that.bBsList('html');
						} else{

							// that.page = 1;
							// that.bBsList();
							ice.ajax({
							    url:'/Comment/bbsCommentList',
							    type:'get',
							    data:{
							    	'bbs_id':that.bbs_id,
							    	'comment_id':that.show_msg_id,
							    },
							    success:function(res){
							    	console.log(res, 'dadas')
							    	if(res.code == 0 && res.data.length > 0){
										that.show_msg_id = '';
							    		that.bbsList[that.sub_i] = res.data[0]
							    	}
							    }
							});
						}
			        }
			    }
			});
    	},
    	onLike: function(e) {
    		// 点赞
    		var that = this
    		var bbs_index = ice(e).attr("data-indexs");
    		ice.ajax({
			    url:'/AjaxSyn/bbsLike',
			    type:'get',
			    data:{
			    	bbs_id : ice(e).attr("data-bbs_id"),
			    },
			    success:function(res){
			        if(res.code == 1){
			        	if(res.message=='请先登录'){
			        		ShowLogin();
			        		return false;
			        	}
			            ice.pop({content:res.message})
			            return false;
			        }else{
			        	that.funBbsInfo()
			        }
			    }
			});
    	},
    	onload: function(){
    		var that = this
    		that.this_login_user_id = ice("#this_login_user_id").val()
    		that.bbs_id = ice("#bbs_id").val()
    		that.funBbsInfo();
    		that.bBsList('html');

    		// 获取分类
			ice.ajax({
			    url:'/Bbs/ajaxBbsTypeList',
			    type:'get',
			    data:'',
			    success:function(res){
			    	that.set({
		                bbsTypeList:res.data,
		            })
					ui.init();
			    }
			});
    	},
    	funBbsInfo: function(e){
    		var that = this
    		// 获取详细
			ice.ajax({
			    url:'/Bbs/ajaxBbsInfo',
			    type:'get',
			    data:{
			    	'bbs_id' : ice("#bbs_id").val()
			    },
			    success:function(res){
			    	console.log(res)
			    	that.set({
		                bbsInfo:res.data,
		            })
					ui.init();
			    }
			});
    	},
    	bBsList: function(type='html'){
    		// 获取评论列表
    		var that = this;
    		that.loadtext = '评论加载中...';
    		ice.ajax({
			    url:'/Comment/bbsCommentList',
			    type:'get',
			    data:{
			    	'bbs_id':that.bbs_id,
			    	'page':that.page,
			    	'limit':that.limit,
			    },
			    success:function(res){
			    	if(res.code == 0){
			    		if(res.data.length > 0){
			        		if(type == 'html'){
			        			that.bbsList = res.data
			        		} else{
			        			that.bbsList = that.bbsList.concat(res.data);
			        		}
			        		if(res.data.length < that.limit){
		        				that.hideLoad = false;
		        			}
			    		} else{
			    			that.hideLoad = false;
			    		}
			    	} else{
			    		ice.pop({content:res.message,icon:'none'})
			    	}
			    	that.loadtext = '加载更多评论';
			    }
			});
    	},
    })
</script>
{/block}